
class Main extends React.Component {
    constructor(props) {
  super(props);
  this.state = {
    list:[],
    name:'',
    id:0,
    start:0,
    pagesize: 15,
    counts: [],
  };
}

formatlist(list) {
    console.log(list,'list');
    
    var listitem = [],that=this,wulist=[];
    if(list.length>0){
        list.forEach((x,i) => {
            let state = x.state=='APPLYING'?'审核中':x.state=='SUCCESS'?'已通过':'未通过'
            listitem.push(
                <tr key={i}>
                    <td>{x.userid}</td> 
                    <td>{x.phone}</td> 
                    <td style={{color:state=='已通过'?'#669900':state=='未通过'?'#f00':'#000'}}>{state}</td> 
                    {/* <td>{x.scorefrom+"~"+x.scoreto}</td>  */}
                    <td className="operatebox">
                        <div className='operate' id={"ope"+x.id}>
                       
    
                            <div style={{display:x.state=='APPLYING'?'':'none'}}  >
                                {/* <img src="./src/edit.png"/> */}
                                <p className='edit' onClick={that.confirm.bind(this,x.id)}>通过</p>
                            </div>
                            <div onClick={that.cancal.bind(this,x.id)} style={{display:x.state=='APPLYING'?'':'none'}}  data-toggle="modal" data-target="#modalOne">
                                {/* <img src="./src/del.png"/> */}
                                <p className='edit colred'  >拒绝</p>
                            </div>
                            
      
                            <div>
                                <img src="./src/del.png"/>
                                <p className='edit colred' onClick={that.del.bind(this,x.id)}>删除</p>
                            </div>
                            
                        </div>
                     </td>
                </tr>
            )
        });
    }
    else {
        wulist.push(
            <p className="wulist">暂无数据</p>
        )
    }
    this.setState({listitem,list,originallist:list,wulist})
}
confirm(e){
    let that = this
    UserApplycheck({id:e},res=>{
        if(res.issuccess==1){
            alert('操作成功')
            that.freshlist(that.state.start)  
        }
    })

}
cancal(e){
    console.log(e,'cancel')
    this.setState({refuseid:e})
}
// 编辑
todetail(e){
  window.location.href = './applydetail.html?id='+e
}
// 删除
del(e){    
    this.setState({delid:e},()=>{
        $('#myModal').modal('toggle');
    })
}
confirmdel(){
       let {delid,start}=this.state
       UserApplydel(delid,res=>{
        if(res.issuccess==1){
            alert('删除成功')
            $('#myModal').modal('toggle');
            this.freshlist(start)
        }else{
            $('#myModal').modal('toggle');
            alert(res.msg);
        }
    })
}

componentDidMount() {
    let {start}=this.state
    this.freshlist(start)   
    }
freshlist(start){
    let {pagesize}=this.state
    UserApplygetlist({start,pagesize},res=>{
       if(res.issuccess==1){
        if (start == 0) {
            let pagecount = Math.ceil(res.total / pagesize);
            this.setpager(pagecount, start);
            this.setState({ start,total:res.total })
        }
       this.formatlist(res.list);      
   }
})
    
}
setpager(pagecount, start) {
    let counts = [];
    for (let i = 1; i < pagecount + 1; i++) {
        counts.push(start + i)
    }
    this.setState({ counts, pagestart: 0 })
}
clickpage(e) {
    let { start, pagesize } = this.state
    start = e * pagesize
    this.setState({ pagestart: e, start }, () => {
        this.freshlist(start)
    })
}
setpage(e){
    let {pagesize,start}=this.state
    pagesize=parseInt(e)
    start=0
    this.setState({pagesize,start},()=>{
        this.freshlist(start)
    })
}

inputchange(prop,e) {
    // let { target } = this.state;
    // target[prop] = e.target.value
    // this.setState({ target })
    this.setState({[prop]:e.target.value }) 
}
reasonsubmit(){
    let{refuseid,reason} = this.state,data = {id:refuseid,reason},that = this;
    UserApplycheck(data,res=>{
        if(res.issuccess==1){
            alert('操作成功')
            that.freshlist(that.state.start)  
        }
    })
    console.log(data,'reasonsubmit');
    
}
add(){
    $('#modalOne').modal('toggle');
}
     render() {
        let{listitem,reason,counts,pagestart} = this.state;
            console.log(listitem,'listitem');
            
            return(
                <div className="breadLinebox">
                    <Modal content='确定要删除吗？' click={this.confirmdel.bind(this)} />

                    <div className="modal fade" id="modalOne" >
                        <div className="modal-dialog">
                            <div className="modal-content">
                         
                            <div className="modal-body">
                            <div className="input-group">
                                    <span className="input-group-addon">拒绝理由</span>
                                    <input id='name' onChange={this.inputchange.bind(this, 'reason')} value={reason} type="text" placeholder='请输入拒绝理由' className="input" />
                                </div>
                                
                            </div>
                            <div className="modal-footer border">
                                <button type="button" className="closemod" data-dismiss="modal">关闭</button>
                                <button type="button" onClick={this.reasonsubmit.bind(this)} data-dismiss="modal"  className="submitmod">提交</button>
                            </div>

                            </div>
                            </div>
                        </div>


                <div className='content_wrap panel-default content_wrap'>
                   <div className="breadLine">
                        <div className="img">
                            当前位置 > 申请管理
                        </div>
                    </div>
                   <div className="content">
                        {/* <div className="tabletit">
                            <p className="add" data-toggle="modal" data-target="#modalOne" onClick={this.add.bind(this)}>新建</p>
                        </div> */}
                        <table className="tab">
                            <thead>
                            <tr>
                            <th>申请人ID</th>
                            <th>申请人电话</th>
                            <th>状态</th>
                            {/* <th>得分段</th> */}
                            <th className="cz tconter">操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            {listitem}
                            </tbody>
                        </table>
                        <div className="pagerbox">
                            <p>共{this.state.total}条</p>
                            <Pager counts={counts} click={this.clickpage.bind(this)} change={this.setpage.bind(this)} index={pagestart} />
                        </div>
                   </div>
                </div>
                </div>
                
                
            )

            
        }
    }





ReactDOM.render(
    <div>
        <TopLine/>
        <div id='body'>
            <LeftMenu code='apply' />
            <Main/>
        </div>
        </div>
            // <Barrage/>
,$('.container')[0]
)